import dynamic from 'next/dynamic'
import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
import { useRouter } from 'next/router'
import _ from 'lodash'
import Seo from '@/core/components/Seo'
import Breadcrumb from '@/lib/brand/components/Breadcrumb'
import useBrand from '@/lib/brand/hooks/useBrand'
import PageNotFound from '@/pages/404';

const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
const Brand = dynamic(() => import('@/lib/brand/components/Brand'))

export default function BrandDetail() {
  const router = useRouter()
  const { slug = '' } = router.query

  const brandName = getNameFromSlug(slug)
  const id = getIdFromSlug(slug)
  const {brand} = useBrand({id})
  if (!brand || !brand.data || _.isEmpty(brand.data)) {
    return <PageNotFound />;
  }
  return (
    <BasicLayout>
      <Seo
        title={`Jual Produk Resmi ${brandName} Indonesia | Indoteknik.com`}
        description='B2B Marketplace MRO &amp; Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi &amp; Harga Kompetitif'
        additionalMetaTags={[
          {
            property: 'keywords',
            content: `Jual ${brandName}, beli ${brandName}, Distributor ${brandName} Indonesia, cari ${brandName}, produk ${brandName}, ${brandName} Indonesia, harga ${brandName}`
          }
        ]}
      />

      <Breadcrumb brandName={brandName} />

      <Brand brand={brand} />
      {!_.isEmpty(router.query) && (
        <ProductSearch
          query={_.omit(router.query, 'slug')}
          prefixUrl={`/shop/brands/${slug}`}
          defaultBrand={getNameFromSlug(slug)}
          brand={brand}
        />
      )}
    </BasicLayout>
  )
}